<template>
  <div class="account-settings-info-view">
    <a-tabs v-model="tabIndex">
      <a-tab-pane key="1" tab="中文"></a-tab-pane>
      <a-tab-pane key="2" tab="英文"></a-tab-pane>
    </a-tabs>
    <a-row :gutter="16" type="flex">
      <a-col :order="isMobile ? 2 : 1" :md="16" :lg="16">
        <a-form layout="vertical" :form="form">
          <!-- <a-form-item label="用户头像">
            <div class="ant-upload-preview" @click="$refs.modal.edit()">
              <a-icon type="cloud-upload-o" class="upload-icon" />
              <div class="mask">
                <a-icon type="plus" />
              </div>
              <img :src="option.img" />
            </div>
          </a-form-item> -->
          <a-form-item label="公司名称" v-if="tabIndex==1">
            <a-input placeholder="公司名称" v-model="form.name" style="width: 50%" />
          </a-form-item>
          <a-form-item label="英文公司名称" v-else>
            <a-input placeholder="英文公司名称" v-model="form.nameEn" style="width: 50%" />
          </a-form-item>
          <a-form-item label="商城链接">
            <a-input placeholder="商城链接" v-model="form.shopLink" style="width: 50%" />
          </a-form-item>
          <!-- <a-form-item label="座右铭">
            <a-textarea v-model="form.motto" placeholder="座右铭" :auto-size="{ minRows: 3, maxRows: 5 }" />
          </a-form-item> -->
          <!-- <a-form-item label="个性签名">
            <a-textarea v-model="form.signature" placeholder="个性签名" :auto-size="{ minRows: 3, maxRows: 5 }" />
          </a-form-item> -->
          <!-- <a-form-item label="公司成立时间">
            <a-date-picker v-model="form.establishDate" valueFormat="YYYY-MM-DD" style="width:50%" />
          </a-form-item> -->
          <a-form-item label="总负责人" v-if="tabIndex==1">
            <a-input placeholder="总负责人" v-model="form.principal" style="width: 50%" />
          </a-form-item>
          <a-form-item label="英文总负责人" v-else>
            <a-input placeholder="英文总负责人" v-model="form.principalEn" style="width: 50%" />
          </a-form-item>
          <a-form-item label="负责人联系方式">
            <a-input placeholder="负责人联系方式" v-model="form.principalPhone" style="width: 50%" />
          </a-form-item>
          <a-form-item label="网站seo关键字">
            <a-input placeholder="seo关键字" v-model="form.seoKeywords" />
          </a-form-item>
          <a-form-item label="网站seo描述">
            <a-textarea
              v-model="form.seoDescription"
              placeholder="网站seo描述"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item label="公司地址" v-if="tabIndex==1">
            <a-input placeholder="公司地址" v-model="form.address" />
          </a-form-item>
          <a-form-item label="英文公司地址" v-else>
            <a-input placeholder="英文公司地址" v-model="form.addressEn" />
          </a-form-item>
          <a-form-item label="备案号">
            <a-input placeholder="备案号" v-model="form.beian" />
          </a-form-item>
          <a-form-item label="公司Logo">
            <a-upload
              list-type="picture-card"
              :file-list="fileList"
              :remove="hanldeImgRemove"
              @preview="handlePreview"
              :customRequest="handleUploadChange"
              class="upload-half"
              accept="image/*"
            >
              <div class="custom-btn" v-if="fileList.length < 1">
                <a-icon type="ant-cloud" style="font-size: 26px" />
                <div class="ant-upload-text">添加图片</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item label="移动端公司logo">
            <a-upload
              list-type="picture-card"
              :file-list="fileList2"
              :remove="hanldeImgRemove2"
              @preview="handlePreview"
              :customRequest="handleUploadChange2"
              class="upload-half"
              accept="image/*"
            >
              <div class="custom-btn" v-if="fileList2.length < 1">
                <a-icon type="ant-cloud" style="font-size: 26px" />
                <div class="ant-upload-text">添加图片</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item label="合作伙伴">
            <a-upload
              list-type="picture-card"
              :file-list="fileList3"
              :remove="hanldeImgRemove3"
              @preview="handlePreview"
              :customRequest="handleUploadChange3"
              class="upload-half"
              accept="image/*"
            >
              <div class="custom-btn" v-if="fileList3.length < 1">
                <a-icon type="ant-cloud" style="font-size: 26px" />
                <div class="ant-upload-text">添加图片</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item label="公众号二维码">
            <a-upload
              list-type="picture-card"
              :file-list="fileList1"
              :remove="hanldeImgRemove1"
              @preview="handlePreview"
              :customRequest="handleUploadChange1"
              class="upload-half"
              accept="image/*"
            >
              <div class="custom-btn" v-if="fileList1.length < 1">
                <a-icon type="ant-cloud" style="font-size: 26px" />
                <div class="ant-upload-text">添加图片</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item label="公司介绍" v-if="tabIndex==1">
            <wangEditor id="edtor1" v-model="form.companyProfile" @change="editorChange"></wangEditor>
          </a-form-item>
          <a-form-item label="英文公司介绍" v-else>
            <wangEditor id="edtor2" v-model="form.companyProfileEn" @change="editorChange1"></wangEditor>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="hanldeUpdateClick">更新基本设置</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <avatar-modal ref="modal" @ok="setavatar" :parent="this" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false" width="60%">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import AvatarModal from './AvatarModal'
import { baseMixin } from '@/store/app-mixin'
import { showMessage } from '@/utils/mixins'
import { getSystemInfo, updateSystemInfo } from '@/api/manage'
import { uploadFile, deleteFile } from '@/api/common'
import { getFileName } from '@/utils/util'
import wangEditor from '@/components/Editor/WangEditor.vue'

export default {
  mixins: [baseMixin, showMessage],
  components: {
    AvatarModal,
    wangEditor,
  },
  data() {
    return {
      preview: {},
      tabIndex: '1',
      form: {
        name: undefined, //公司名称
        nameEn: undefined, //公司名称
        principal: undefined, // 总负责人
        principalEn: undefined, // 总负责人
        principalPhone: undefined, // 负责人联系方式
        logo: undefined, // 公司logo
        mobileLogo: undefined, //移动端logo
        officialAccounts: undefined, // 公众号二维码
        companyProfile: undefined, // 公司介绍
        companyProfileEn: undefined, // 公司介绍
        seoKeywords: undefined, // seo 关键字
        seoDescription: undefined, // seo描述
        address: undefined, // 公司地址
        addressEn: undefined, // 公司地址
        shopLink: undefined, // 商城链接
        beian: undefined, // 备案号
        partnerImg: undefined, //合作伙伴
      },
      option: {
        img: '',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      previewVisible: false,
      previewImage: '',
      locationOrigin: process.env.VUE_APP_API_ORIGIN,
      avatarId: undefined,
    }
  },
  methods: {
    //删除图片
    hanldeImgRemove3(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 200) {
          this.showMessage(res, () => {
            this.fileList3 = []
            _this.form.partnerImg = undefined
          })
        }
      })
    },
    //删除图片
    hanldeImgRemove2(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 200) {
          this.showMessage(res, () => {
            this.fileList2 = []
            _this.form.mobileLogo = undefined
          })
        }
      })
    },
    // 移动端LOGO
    handleUploadChange2(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 200) {
          console.log(res)
          file.url = res.data.link
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.link)
          _this.fileList2.push(file)
          _this.form.mobileLogo = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    // 合作伙伴
    handleUploadChange3(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 200) {
          file.url = res.data.link
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.link)
          _this.fileList3.push(file)
          _this.form.partnerImg = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    //删除图片
    hanldeImgRemove1(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 200) {
          this.showMessage(res, () => {
            this.fileList1 = []
            _this.form.officialAccounts = undefined
          })
        }
      })
    },
    // 公众号二维码
    handleUploadChange1(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 200) {
          file.url = res.data.link
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.link)
          _this.fileList1.push(file)
          _this.form.officialAccounts = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    //自定义上传图片
    handleUploadChange(file) {
      file = file.file
      const _this = this
      const formdata = new FormData()
      formdata.append('file', file)
      uploadFile(formdata).then((res) => {
        if (res.code == 200) {
          file.url = res.data.link
          file.uid = res.data._id
          file.id = res.data._id
          file.filename = getFileName(res.data.link)
          _this.fileList.push(file)
          _this.form.logo = res.data._id
        } else {
          _this.$message.error(res.message)
        }
      })
    },
    // 预览图片
    handlePreview(file) {
      this.previewVisible = true
      this.previewImage = file.url
    },
    //删除图片
    hanldeImgRemove(file) {
      const _this = this
      deleteFile({ id: file.id }).then((res) => {
        if (res.code == 200) {
          this.showMessage(res, () => {
            this.fileList = []
            _this.form.logo = undefined
          })
        }
      })
    },
    editorChange(val) {
      this.form.companyProfile = val
    },
    editorChange1(val) {
      this.form.companyProfileEn = val
    },
    setavatar(data) {
      this.form.avatar = data._id
      this.option.img = data.link
      this.hanldeUpdateClick()
    },
    // 获取公司介绍
    getSystemInfo() {
      getSystemInfo().then((res) => {
        if (res.code == 200) {
          res = res.data
          if (res) {
            for (const key in this.form) {
              this.form[key] = res[key] 
            }
            if (res.logo) {
              this.form.logo = res.logo._id
              this.fileList = [{ uid: res.logo._id, id: res.logo._id,name: getFileName(res.logo.link), url: res.logo.link }]
            }
            if (res.officialAccounts) {
              this.form.officialAccounts = res.officialAccounts._id
              this.fileList1 = [{ uid: res.officialAccounts._id, id: res.officialAccounts._id,name: getFileName(res.officialAccounts.link), url: res.officialAccounts.link }]
            }
            if (res.mobileLogo) {
              this.form.mobileLogo = res.mobileLogo._id
              this.fileList2 = [{ uid: res.mobileLogo._id, id: res.mobileLogo._id,name: getFileName(res.mobileLogo.link), url: res.mobileLogo.link }]
            }
            if( res.partnerImg ) {
              this.form.partnerImg = res.partnerImg._id
              this.fileList3 = [{ uid: res.partnerImg._id, id: res.partnerImg._id,name: getFileName(res.partnerImg.link), url: res.partnerImg.link }]
            }
          }
        }
      })
    },
    // 更新公司介绍
    hanldeUpdateClick() {
      this.loading = true
      updateSystemInfo(this.form).then((res) => {
        this.loading = false
        if (res.code == 200) {
          this.showMessage(res, this.getSystemInfo)
        }
      })
    },
  },
  mounted() {
    this.getSystemInfo()
  },
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 10px;
}
.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  width: 140px;
  box-shadow: 0 0 4px #ccc;
  border-radius: 50%;
  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }
  img,
  .mask {
    width: 140px !important;
    height: 140px !important;
    overflow: hidden;
    border-radius: 50%;
  }
}
</style>
